<template>
  <div class="Particulars">
    <!-- 导航栏 -->
    <van-nav-bar title="订单详情" class="nav" left-text="返回" left-arrow @click-left="closePopupShow" />
    <div class="a">
      <!-- 订单详情 -->
      <van-cell @haha="closePopupShow" class="order">
        <info :goodslist="DetailsItem" @to_refund="refund($event)"></info>
      </van-cell>
      <!-- 收货地及收货人 -->
      <van-cell class="order">
        <div class="order-left">
          收货地址:
          <div class="add">
            {{ DetailsItem.user_receive_address }}
          </div>
          <div class="att">
            联系人:{{ DetailsItem.user_receive_name }}
            <span>联系电话:{{ DetailsItem.receive_user_phone }}</span>
          </div>
        </div>
      </van-cell>
      <!-- 商家信息 -->
      <van-cell class="order">
        <div class="order-left">
          <van-image class="merchantArrt" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
          <div class="merchantId">{{ DetailsItem.shop_id }}</div>
        </div>
        <div class="merchant-right">
          <div class="merchant-name">{{ DetailsItem.shop_name }}</div>
          <div class="merchant-att"><van-icon name="phone-o" /> {{ DetailsItem.sh_shop.shop_phone }} <van-icon name="location-o" /> 231m</div>
          <div class="merchant-add"><van-icon name="shop-o" /> {{ DetailsItem.sh_shop.shop_address }}</div>
        </div>
      </van-cell>
      <!-- 商品信息 -->
      <van-cell class="order">
        <div>选购商品</div>
        <goods-list @goodlist="getgoodlist"></goods-list>
      </van-cell>
      <!-- 其他 -->
      <div class="other">
        <van-cell title="包装"
          ><span></span><span class="other"> ¥ {{ DetailsItem.packing }}</span>
        </van-cell>
        <van-cell title="活动优惠"> <span class="info"> </span> <span class="other"> 暂无可用优惠</span> </van-cell>
        <van-cell title="优惠券" :is-link="this.DetailsItem.status === 0"> <span class="info"> 未使用优惠券 </span><span class="other"> </span> </van-cell>
        <van-cell title="配送费">
          <span class="info">配送上门 </span>
          <span class="other"> ¥{{ DetailsItem.delivery_money }}</span>
        </van-cell>
      </div>
      <!-- 总价 -->
      <div class="totalPirce">
        <van-cell title="合计"
          ><span class="totalPirceNumber">¥{{ this.price }}</span></van-cell
        >
      </div>
      <!-- 确认 -->
      <div class="confirmPay"><com-firm :goodslist="DetailsItem" @confirm_refund="toConfirmRefund($event)" @confirm_delivery="toConfirmDelivery($event)" /></div>
    </div>
  </div>
</template>

<script>
import { getDiscount } from '../../api/order'
import GoodsList from './components/goodlist'
import Info from './components/info'
import ComFirm from './components/comfirm'
export default {
  name: 'goodDetails',
  props: {
    DetailsItem: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      goodlist: []
    }
  },
  created () {
    this.getDiscounts()
  },
  mounted () {
  },
  components: {
    GoodsList,
    Info,
    ComFirm
  },
  methods: {
    getgoodlist (val) {
      this.goodlist = val
      console.log(this.DetailsItem)
    },
    changeDiscount () {
      if (this.DetailsItem.status === 0) {
      } else {
        return false
      }
    },
    closePopupShow () {
      this.$emit('close')
    },
    confirmOrder () {
      this.$emit('confirm_order')
    },
    refund (val) {
      this.$emit('to_refund', val)
    },
    toConfirmRefund (val) {
      this.$emit('to_confirm_refund', val)
    },
    toConfirmDelivery (val) {
      this.$emit('to_confirm_delivery', val)
    },
    async getDiscounts () {
      const { data } = await getDiscount({
        DiscountId: 5
      })
      console.log(data)
    }
  },
  computed: {
    price: function () {
      var price = 0
      for (var i = 0; i < this.goodlist.length; i++) {
        price += parseFloat(this.goodlist[i].sum_price)
      }
      var other = this.DetailsItem.packing + parseFloat(this.DetailsItem.delivery_money)
      return price + other
    }
  }

}
</script>

<style scoped lang="less">
.Particulars {
  .a {
    margin-top: 90px;
  }
  .nav {
    position: fixed;
    width: 100%;
    top: 0;
    color: #fff;
  }
  .confirmPay {
    position: fixed;
    width: 100%;
    bottom: 0;
    font-weight: 700;
  }
  .totalPirce {
    padding-left: 25px;
    margin-bottom: 90px;
    .van-cell {
      font-size: 35px;
      font-weight: 700;
    }
  }
  .totalPirceNumber {
    color: red;
    margin-right: 20px;
  }
  .order {
    margin: 15px 0;
    .merchant-right {
      margin-top: 10px;
      font-size: 25px;
      float: left;
      margin-left: 50px;
      .merchant-name {
        font-size: 35px;
        font-weight: 700;
      }
    }
    .order-left {
      font-size: 25px;
      float: left;
      .merchantArrt {
        width: 100px;
        height: 100px;
      }
      .merchantId {
        color: rgb(167, 167, 167);
        text-align: center;
        width: 100px;
      }
      .add {
        margin-left: 53px;
        box-sizing: border-box;
      }
      .att {
        margin-left: 53px;
        box-sizing: border-box;
      }
      .overTime {
        margin-top: 15px;
        font-weight: 700;
        font-size: 30px;
        box-sizing: border-box;
      }
    }
    .order-right {
      text-align: right;
      font-size: 25px;
      float: right;
      .van-button {
        font-size: 25px;
        width: 170px;
        height: 50px;
        margin-top: 10px;
      }
    }
  }
  .other {
    font-size: 28px;
    color: #000;
    margin-left: 25px;
    margin-right: 15px;
  }
  .info {
    font-size: 12px;
  }
}
</style>
